<template>
  <div class="middle">
    <!--  页面中部--顶部数据栏     -->
    <div class="data_mid_1">
      <!--  页面中部--顶部数据栏--单个显示块        -->
      <div class="data1" v-for="(item, index) in mid_top" :key="index">
        <div class="data1_img" :style="{background: 'url(' + item.img + ')'}"></div>
        <div class="data1_right">
          <div class="data1_text1">{{ item.text }}</div>
          <div class="data1_text2">
            {{ item.data }}<span class="data1_text5">{{ item.unit }}</span>
          </div>
        </div>
      </div>
    </div>
    <!--  地图  -->
    <table_map/>
    <!--  数据年份下拉选择  -->
    <div class="yearChange">
      <el-select
        size="small"
        v-model="dataYear"
        @visible-change="yearChange"
        style="width: 102px;"
        popper-class="selectOption">
        <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </div>
    <!--  子屏菜单栏  -->
    <!--    <div class="screenMenu">-->
    <!--      <div class="menu_item" v-for="(item, index) in maps" :key="index" @click="dialogVisible = true">-->
    <!--        <div class="menu_img" :style="{background: 'url(' + item.img + ')'}"/>-->
    <!--        <div class="menu_text">{{ item.text }}</div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--  页面中部--底部数据栏     -->
    <div class="data_mid_2">
      <!--   多跨协同     -->
      <table_collaborate/>
      <!-- 工伤联网结算 -->
      <table_settlement/>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import api from "@/api/gs";
import table_collaborate from "./table_collaborate";
import table_settlement from "./table_settlement";
import table_map from "./table_map";

const echartsGl = require('echarts-gl');

export default {
  name: "Part_middle",
  components: {
    table_collaborate, table_settlement, table_map
  },
  data() {
    return {
      years: [],
      // 数据年度
      dataYear: '',
      // 工伤联网结算轮播表配置
      config_data: {
        header: ['#', '姓名', '身份证', '统筹区', '医院', '时间', '金额'],
        headerHeight: 40,
        data: [],
        index: false,
        indexHeader: '#',
        columnWidth: [80, 120, 280, 120, 320, 150, 100],
        rowNum: 10,
        align: ['left'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A',
        hoverPause: false
      },
      mid_top: [
        {
          unit: '%',
          text: '事故率',
          data: 0,
          img: require('../assets/data_mid_1_3.png')
        },
        {
          unit: '个',
          text: '案件数',
          data: 0,
          img: require('../assets/data_mid_1_2.png')
        },
        {
          unit: '个',
          text: '参保人数',
          data: 0,
          img: require('../assets/data_mid_1_1.png')
        }
      ],
      maps: [
        {
          text: '全域预防',
          img: require('../assets/btn_img2.png'),
          pathName: 'Fund'
        },
        {
          text: '精准智控',
          img: require('../assets/btn_img3.png'),
          pathName: 'CaseAnalysis'
        },
        {
          text: '安心工伤',
          img: require('../assets/btn_img4.png'),
          pathName: ''
        }
      ],
      // 子屏显示标记
      dialogVisible: false,
      // 弹框显示标记(工伤联网结算)
      gslwjsShow: false,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      this.getCasesInfo();
      this.yearInit();
    },
    // 数据年份初始化
    yearInit() {
      const currentYear = new Date().getFullYear();
      this.dataYear = currentYear;
      console.log(this.dataYear)
      this.years.push({value: (currentYear), label: (currentYear) + '年'})
    },
    // 年份下拉的回调
    yearChange() {
      const myDate = new Date()
      const startYear = myDate.getFullYear() - 1 // 起始年份
      const endYear = myDate.getFullYear() // 结束年份
      this.years = [];
      for (let i = startYear; i <= endYear; i++) {
        this.years.push({value: (i), label: (i) + '年'})
      }
    },
    // 关闭子屏的回调
    closeDialog() {
      this.dialogVisible = false
    },
    //获取案件数、事故发生率
    getCasesInfo() {
      let param = {}
      param.areaCode = '330799';
      param.startYear = '202101';
      param.endYear = '202112';

      axios.post(api.getCasesInfo, param).then(res => {
        const result = res.data.result;
        console.log("___________")
        console.log(res)
        for (let item of this.mid_top) {
          item.text == '事故率' ? item.data = result.sgl * 100 : '';
          item.text == '案件数' ? item.data = result.ajs : '';
        }
      }).catch(err => {
        console.log(err)
      });
    },
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: 微软雅黑;
}

body {
  width: 100%;
  height: 100%;
}

.data_mid_1 {
  width: 95%;
  height: 10%;
  margin: 0 auto;
}

.data1 {
  float: right;
  height: 90%;
  width: 31%;
}

.data1_right {
  float: right;
  color: #fff;
  width: 50%;
  height: 84%;
  padding-top: 5%;
  color: #FBD533;
}

.data1_img {
  float: left;
  height: 90%;
  width: 26%;
  overflow: hidden !important;
  background-size: cover !important;
  margin-left: 23%;
}

.data1_text1 {
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  margin-left: 6%;
  margin-top: 5%;
  color: white;
}

.data1_text2 {
  display: inline-block;
  float: left;
  width: 95%;
  height: 60%;
  font-family: LCD2;
  font-size: 1.6rem;
  text-align: left;
  margin-left: 5%;
}

.data1_text5 {
  font-size: .8rem;
}

.data_mid_2 {
  width: 100%;
  height: 25%;
  margin-top: 590px;
}

.btn_bottom :hover {
  color: #F9D494;
}

.middle {
  height: 100%;
  width: 45%;
  margin: 0 auto;
}

main {
  margin: 6% auto;
  height: 81%;
  width: 96%;
}

footer {
  background: url("../assets/footer.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  height: 8.2%;
  width: 100%;
  position: absolute;
  bottom: 0;
}

.yearChange {
  position: absolute;
  z-index: 1;
  top: 220px;
  right: 600px;
  height: auto;
  width: auto;
}

.yearChange >>> .el-select .el-input__inner {
  border-color: #025085;
}

.yearChange >>> .el-input--small .el-input__inner {
  background-color: #0E3868;
  color: #96ADC3;
  font-size: 17px;
  font-weight: 600;
  height: 28px;
}
</style>

<style>
.selectOption {
  background-color: #0E3868;
  color: #96ADC3;
  border-color: #025085;
  text-align: center;
}
</style>
